<template>
  <view class="myLogin">

    <u-cell-group :border="false" :customStyle="{'margin-bottom':'20px'}">
      <u-cell :title="type===0?'手机号登录':'账号登录'" :border="false" :titleStyle="{'font-weight': 600,'font-size':'24px'}"
        :isLink="true">
        <text slot="value" class="u-slot-value" @click="checkType" >{{!type?'账号登录':'手机号登录'}}</text>
        <u-icon @click="checkType" slot="right-icon" name="play-right-fill" color="#EF4F3F" size="10"></u-icon>
      </u-cell>
    </u-cell-group>
    
    
    <u-form labelPosition="left" :errorType="errorType" :rules="arules" :model="accountForm" ref="aForm" class="form" v-if="type">
      <u-form-item key="account" prop="account"  ref="account" labelWidth="10">
        <u-input v-model="accountForm.account" clearable   border="bottom" clearable placeholder="请输入账号" :class="{'is-error': !isValid.account }"></u-input>
      </u-form-item>
      <u-form-item key="password" prop="password" ref="password" labelWidth="10">
        <u-input v-model="accountForm.password" clearable border="bottom" type="password" placeholder="请输入密码" clearable :class="{'is-error': !isValid.password }">
        </u-input>
      </u-form-item>

    </u-form>
    
    <u-form labelPosition="left" :model="phoneForm" ref="pForm" class="form" v-else :rules="prules">
      <u-form-item key="phone" prop="phone"  ref="phone" labelWidth="10" >
        <u-input v-model="phoneForm.phone" border="bottom" placeholder="请输入手机号" border-color="red" :class="{'is-error': !isValid.phone }"></u-input>
      </u-form-item>
    
      <u-form-item key="verifyCode" prop="verifyCode"  ref="verifyCode" labelWidth="10">
        <u-input v-model="phoneForm.verifyCode" border="bottom" placeholder="请输入验证码" :class="{'is-error': !isValid.verifyCode }">
        </u-input>
          <button slot="right" class="input-verifyCode" :disabled="tipTimer!==0" @click="getCode" >{{tips}}</button>
      </u-form-item>
    
    </u-form>
    <u-button type="error" shape="circle" @click="toLogin" :disabled="btnDisabled" text="登录"></u-button>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        type: 1,
        errorType:'message',
        tipTimer:0,
        tips:"获取验证码",
        count:10,
        isValid: {
          account: true,
          password: true,
          phone:true,
          verifyCode:true
        },
        accountForm: {
          account: 'hdsj001',
          password: '123456'
        },
        phoneForm:{
          phone:'17604618635',
          verifyCode:''
        },
        arules: {
            'account': {
       			// 自定义验证函数
       			validator: (rule, value, callback) => {
              const res = Boolean(value)
              this.isValid.account = res
              return  res
       			},
       			message: '请输入账号',
       			trigger: ['change','blur'],
       		},
            'password': {
       			// 自定义验证函数
       			validator: (rule, value, callback) => {
              const res = Boolean(value)
              this.isValid.password = res
              return  res
       			},
       			message: '请输入密码',
       			trigger: ['change','blur'],
       		}
        	},
          
      prules:{
       	'phone': [
       		{
       			required: true, 
       			message: '请输入手机号',
       			trigger: ['change','blur'],
       		},
       		{
       			// 自定义验证函数
       			validator: (rule, value, callback) => {
       				const res =  uni.$u.test.mobile(value);
              this.isValid.phone = res
              return  res
       			},
       			message: '手机号码不正确',
       			trigger: ['change','blur'],
       		}
       	],
        'verifyCode':	{
       			// 自定义验证函数
       			validator: (rule, value, callback) => {
              const res = Boolean(value)
              this.isValid.verifyCode = res
              return  res
       			},
       			message: '请输入验证码',
       			trigger: ['change','blur'],
       		}
      }
    }
    },
    created() {},
    mounted() {},
    onLoad() {},
    computed:{
      btnDisabled(){
       if(this.type=== 1 && this.accountForm.account && this.accountForm.password){
            return false
       }
       if(this.type=== 0 && this.phoneForm.phone && this.phoneForm.verifyCode){
         return false
       }
       return true
      }
    },
    methods: {
      //登录状态切换
      checkType() {
        this.type = this.type ? 0 : 1
      },
      // 获取验证码
     async getCode(){
        this.$refs.pForm.validateField('phone',async (err)=>{
            if(err.length > 0){
               this.$refs.uToast.show({ message: "手机号输入错误！请重新输入" })
            }else{
              // 模拟请求验证码获取接口
              uni.showLoading({
                title:"正在获取验证码"
              })
               if(this.tipTimer) clearInterval(this.tipTimer)
              setTimeout(()=>{
              uni.hideLoading()
               this.tipTimer =  setInterval(()=>{
                  if(this.count <= 0){
                    clearInterval(this.tipTimer)
                    this.tips = '获取验证码'
                    this.count = 10
                    this.tipTimer = 0
                    return
                  }
                  this.tips = `${this.count--}秒后重新获取`
                },1000)
              },2000)
            }
        })
      },
      async toLogin(){
        if(this.type=== 1){
        try{
         await this.$refs.aForm.validate()
         const res = await uni.$u.http.post('/login/account',  this.accountForm)
          uni.setStorageSync('token',res.data.data)
          uni.switchTab({
            url:'/pages/assignment/assignment'
          })
        }catch(e){
            console.log('e',e)
        }
        }else{
          await this.$refs.pForm.validate()
          const res = await uni.$u.http.post('/login/phone',  this.phoneForm)
          console.log(res)
          uni.switchTab({
            url:'/pages/assignment/assignment'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .u-slot-value {
    color: #EF4F3F;
    font-weight: 500;
    font-size: 16px;
  }

  ::v-deep .u-cell__body {
    padding: 20px 0 !important;
  }
  .is-error {
    border-bottom-color: #EF4F3F !important;
  }

  .myLogin {
    padding: 33px;
  }

  .form {
    margin-bottom: 50px;
  }

  .input-icon {
    // width: 35px;
    display: flex;
    justify-content: space-between;
  }
  .input-verifyCode{
    font-size: 14px;
    color: #2A2929;
    background-color: #fff;
    
  }
  .input-verifyCode::after { border: none }

.input-verifyCode[disabled] {
  background-color: #fff !important;
  }

</style>